<template>
  <div>
    <el-table
      :data="List"
      border
      style="width: 100%">
      <el-table-column
        prop="info.oid"
        label="订单编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="glist[0].name"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="seller.nickname"
        label="卖家昵称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="seller.uphone"
        label="卖家电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="glist[0].num"
        label="交易数量"
        width="100">
      </el-table-column>
      <el-table-column
      :formatter="formatterType2"
        prop="info.otype"
        label="订单类型"
        >
      </el-table-column>
      <el-table-column
      :formatter="formatterType"
        prop="info.ostate"
        label="交易情况"
        >
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      >
      <template slot-scope="scope">
        <div v-if="scope.row.info.ostate=='4'">
          <el-button @click="sure(scope.row)" type="text" size="small">查看详情</el-button>
        </div>
        <div v-else-if="scope.row.info.ostate=='-1'">
          <el-button @click="sure(scope.row)" type="text" size="small">查看详情</el-button>
        </div>
        <div v-else-if="scope.row.info.ostate=='2'">
          <el-button @click="sure(scope.row)" type="text" size="small">查看详情</el-button>
          <el-button @click="payOrder(scope.row)" type="text" size="small">支付订单</el-button>
        </div>
      <div v-else>
        <el-button @click="handleGrade(scope.row,-1)" type="text" size="small">取消订单</el-button>
        <el-button @click="sure(scope.row)" type="text" size="small">查看详情</el-button>
      </div>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
    inject:['reload'],
    name:'HistoryOrder',
    data(){
        return{
            uid:this.$store.state.uid,
            phone:'',
            orderList:[       
                ],
        }
    },
    methods:{
        payOrder(){
          this.$router.push('/pay')
        },
        async getHistoryOrder(){
            await this.$axios.get("/api/tacitTradeInfo",{
              params:{
                uid:this.uid
              }}).then(res =>{
                this.phone=res.data.data.phone;
              }).catch(error =>{
               // console.log('提交失败')
                //console.log(error )
              })
            const phone1 = this.phone;
            await this.$axios.get("/api/getOrderByPhone",{
              params:{
                phone:phone1
              }}).then(res =>{
                //console.log(res)
                this.orderList=res.data.data;
              }).catch(error =>{
               // console.log('提交失败')
                //console.log(error )
              })
            
        },
        async handleGrade(row,number){
          console.log(row.info.oid)
          //console.log(row.info.gnum)
          const params=new FormData()
          params.append("oid",row.info.oid)
          const oid=row.info.oid;
          const gstate='1';
          const gid=row.info.gid;
          //await this.$store.dispatch("gstateUpdate",{gstate,gid});
          this.$axios.post("/api/order",{},{
            headers:{
                  'satoken':localStorage.getItem("TOKEN")
            },
            params:{
              'oid':oid
            }
          }
          ).then(res =>{
            //console.log(res)
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
               this.reload()
              }).catch(error =>{
                //console.log(error)
              })
          },
        sure(row){
          this.$router.push({
              name:'ord',
              query:{
                oid:row.info.oid
              }
          })
        },
        formatterType(row){
          switch(row.info.ostate){
            case 0:
              return '客户下单'
            case 1:
              return '交易完成'
            case 2:
              return '待支付'
            case 3:
              return '备货完成'
            case 4:
              return '开始发货'
            case -1:
              return '取消订单'
            default:
              return ''
          }
      },
      formatterType2(row){
          switch(row.info.otype){
            case 0:
              return '购买'
            case 1:
              return '租借'
            default:
              return ''
          }
        },
    },
    computed:{
        List(){
            if(this.orderList){
                const  lt= JSON.parse(JSON.stringify(this.orderList));
                //console.log(lt)
                return lt
            }else{
                const  lt=[]
                return lt;
            }
            
      }
    },
    mounted(){
        this.getHistoryOrder()
    }
}
</script>
<style>

</style>
